Sound Demo

Jupyter上でC++を使って音声処理&デバッグがしたいね

まずは基本的な使い方

#include <iostream>

std::cout << "hello world" << std::endl;

hello world

続いて音声の情報の参照

今回は簡単にAudioFileを利用して音声の情報参照
そして、nlohmann/jsonを利用して音声を再生

#include <string>
#include <fstream>

#include "nlohmann/json.hpp"
#include "xtl/xbase64.hpp"

namespace nl = nlohmann;

namespace au
{
    struct audio
    {   
        inline audio(const std::string& filename)
        {
            std::ifstream fin(filename, std::ios::binary);   
            m_buffer << fin.rdbuf();
        }
        
        std::stringstream m_buffer;
    };
    
    nl::json mime_bundle_repr(const audio& a)
    {
        auto bundle = nl::json::object();
        bundle["text/html"] =
           std::string("<audio controls=\"controls\"><source src=\"data:audio/wav;base64,")
           + xtl::base64encode(a.m_buffer.str()) +
            "\" type=\"audio/wav\" /></audio>";
        return bundle;
    }
}

#pragma cling add_include_path("/notebooks/AudioFile")
#include <AudioFile.h>

AudioFile<double> audioFile;
audioFile.load ("demosound.wav");
audioFile.printSummary();

|======================================|
Num Channels: 2
Num Samples Per Channel: 5373517
Sample Rate: 44100
Bit Depth: 16
Length in Seconds: 121.848
|======================================|

au::audio audioData("demosound.wav");
audioData

HTMLの実行

HTMLを埋め込めれば汎用的にGUIを作成することができます！
特にCanvas

#include <string>
#include "xcpp/xdisplay.hpp"

#include "nlohmann/json.hpp"

namespace nl = nlohmann;

namespace ht
{
    struct html
    {   
        inline html(const std::string& content)
        {
            m_content = content;
        }
        std::string m_content;
    };

    nl::json mime_bundle_repr(const html& a)
    {
        auto bundle = nl::json::object();
        bundle["text/html"] = a.m_content;
        return bundle;
    }
}

ht::html rect(R"(
<canvas id=\"canvas\"></canvas>
<script>
{
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 100, 100);
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);
}
</script>)");
xcpp::display(rect, "some_display_id");